<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>办公管理系统-添加用户</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
    <meta name="Keywords" content="keyword1,keyword2,keyword3"/>
    <meta name="Description" content=""/>
    <meta name="Copyright" content="All Rights Reserved."/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/easyUI/easyui.css">
</head>
<body style="background: #F5FAFA;">
<form id="addUserForm" action="${pageContext.request.contextPath}/user/addUser.jspx" method="post" style="margin-top: 20px">
    <table class="table-condensed" align="center">
        <tbody>
        <tr>
            <td><label>账户:</label></td>
            <td><input type="text" id="username" name="username" class="form-control" placeholder="请输入您的登录名"></td>
            <td><label>昵称:</label></td>
            <td><input type="text" id="likename" name="likename" class="form-control" placeholder="请输入您的昵称"></td>
        </tr>
        <tr>
            <td><label>密码:</label></td>
            <td><input type="password" id="password" name="passWord" class="form-control" placeholder="请输入您的密码"></td>
            <td><label>确认密码:</label></td>
            <td><input type="password" id="repwd" name="repwd" class="form-control" placeholder="请输入您的确认密码"></td>
        </tr>
        <tr>
            <td><label>性别:</label></td>
            <td><select name="sex" id="sex" class="btn btn-default">
                <option value="M">男</option>
                <option value="S">女</option>
            </select></td>
        </tr>
        <tr>
            <td><label>邮箱:</label></td>
            <td><input id="email" name="email" type="text" class="form-control" placeholder="请输入您的电子邮件"></td>
        </tr>
        <tr>
            <td><label>手机:</label></td>
            <td><input id="phone" name="phone" type="text" class="form-control" placeholder="请输入您的手机">
            </td>
        </tr>
        </tbody>
    </table>
    <div align="center" style="margin-top: 20px;">
        <a id="btn_submit" class="btn btn-info"><span class="glyphicon glyphicon-plus"></span>&nbsp;添加</a>
        <button type="reset" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>&nbsp;重置
        </button>
    </div>
</form>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/jquery/jquery.min.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/resources/jquery/jquery-migrate-1.2.1.min.js"></script>
<!-- 导入bootStrap的库 -->
<script type="text/javascript"
        src="${pageContext.request.contextPath}/resources/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/easyUI/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/easyUI/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/plugins/layer/2.4/layer.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/resources/plugins/layer/2.4/LayConstant.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/md5.js"></script>
<script type="text/javascript">
    //异步校验用户名
    var isExist;
    $("#username").blur(function () {
        var username = this.value;
        if ($.trim(username) != "") {
            $.ajax({
                url: '${pageContext.request.contextPath}/user/checkUserName.jspx',
                data: {"username": username},
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    if (data.code == 0) {
                        isExist = false;
                        layer.msg(data.message, {icon: 1, time: LayUIConstant.TIP_TIME});
                    } else {
                        isExist = true;
                        layer.msg(data.message, {icon: 5, time: LayUIConstant.TIP_TIME});
                        $("#username").focus();
                    }
                },
                error: function (data) {
                    layer.msg(data.message, {icon: 5, time: LayUIConstant.TIP_TIME});
                }
            });
        }
    });
    //增加用户
    $("#btn_submit").click(function () {
        var username = $("#username").val();
        if ($.trim(username) == "") {
            layer.msg("请输入账号!", {icon: 5, time: LayUIConstant.TIP_TIME});
            $("#username").focus();
            return;
        }
        if (isExist) {
            layer.msg("账号已被注册!", {icon: 5, time: LayUIConstant.TIP_TIME});
            $("#username").focus();
            return;
        }
        var likename = $("#likename").val();
        if ($.trim(likename) == "") {
            layer.msg("请输入昵称!", {icon: 5, time: LayUIConstant.TIP_TIME});
            $("#likename").focus();
            return;
        }
        var password = $("#password").val();
        if ($.trim(password) == "") {
            layer.msg("请输入密码!", {icon: 5, time: LayUIConstant.TIP_TIME});
            $("#password").foucs();
            return;
        }
        var repwd = $("#repwd").val();
        if ($.trim(repwd) == "") {
            layer.msg("请输入确认密码!", {icon: 5, time: LayUIConstant.TIP_TIME});
            $("#repwd").focus();
            return;
        }
        if (password != repwd) {
            layer.msg("两次输入的密码不一致,请重新输入!", {icon: 5, time: LayUIConstant.TIP_TIME});
            $("#repwd").focus();
            return;
        }
        password = hex_md5(password);//MD5加密
        var sex = $("#sex option:selected").val();
        var email = $("#email").val();
        if ($.trim(email) == "") {
            layer.msg("请输入邮箱!", {icon: 5, time: LayUIConstant.TIP_TIME});
            $("#email").focus();
            return;
        }
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if (!filter.test(email)) {
            layer.msg("您输入的邮箱格式不正确!", {icon: 5, time: LayUIConstant.TIP_TIME});
            $("#email").focus();
            return;
        }
        var phone = $("#phone").val();
        if ($.trim(phone) == "") {
            layer.msg("请输入手机号!", {icon: 5, time: LayUIConstant.TIP_TIME});
            $("#phone").focus();
            return;
        }
        var rePhone = /^1[3|4|5|8]\d{9}$/;
        if (!rePhone.test(phone)) {
            layer.msg("您输入的手机号格式不正确!", {icon: 5, time: LayUIConstant.TIP_TIME});
            $("#phone").focus();
            return;
        }
        $.ajax({
            url: '${pageContext.request.contextPath}/user/submitAddUser.jspx',
            data: {
                "username": username,
                "likename": likename,
                "password": password,
                "sex": sex,
                "email": email,
                "phone": phone
            },
            type: 'post',
            dataType: 'json',
            success: function (data) {
                if (data.code == 0) {
                    layer.msg(data.message, {icon: 1, time: LayUIConstant.TIP_TIME});
                   /* parent.location.reload();*/
                    setTimeout(function () {
                    // location.href="selUserList.jspx";
                        parent.location.reload();
                     }, 1500);
                } else {
                    layer.msg(data.message, {icon: 5, time: LayUIConstant.TIP_TIME});
                }
            },
            error: function (data) {
                layer.msg(data.message, {icon: 5, time: LayUIConstant.TIP_TIME});
            }
        });
    });
</script>

</body>
</html>